<script setup lang="ts">
import { reactive, onMounted, watch } from 'vue'

import _ from 'lodash'

import $time from '@/utils/time'

const emit = defineEmits(['change'])

const props = defineProps({
  show: {
    type: Boolean,
    default: () => true
  },
  singleDayType: {
    type: Number,
    default: 0
  },
  singleDayShow: {
    type: Boolean,
    default: true
  },
  dateTypeShow: {
    type: Boolean,
    default: true
  },
  dateValue: {
    type: Array,
    default: () => {
      return []
    }
  }
})

const state = reactive({
  singleDay: props.singleDayType,
  startDate: $time.getCurrentDate(),
  endDate: $time.getCurrentDate(),
  date: [] as any,
  dateType: 0,
  dateTypeList: [
    {
      value: 0,
      label: '全部'
    },
    {
      value: 1,
      label: '工作日'
    },
    {
      value: 2,
      label: '节假日'
    }
  ],
  dateList: [] as any,
  singleOptions: [
    {
      label: '单日',
      value: 0
    },
    {
      label: '多日',
      value: 1
    }
  ]
})

const singleChange = (e: any) => {
  console.log(e)
  if (e === 0) {
    state.date = []
    state.endDate = $time.getCurrentDate()
    emit('change', {
      dateList: [$time.getCurrentDate()],
      singleDay: state.singleDay
    })
  } else {
    state.dateType = 0
    state.date = [$time.getMonthStartDate(), $time.getCurrentDate()]
    state.startDate = $time.getMonthStartDate()
    state.endDate = $time.getCurrentDate()
    searchDateList(state.dateType)
  }
}

const changeDate = (e: any) => {
  if (_.isArray(e)) {
    state.startDate = e[0]
    state.endDate = e[1]
    searchDateList(state.dateType)
  } else {
    emit('change', {
      dateList: [e],
      singleDay: state.singleDay
    })
  }
}

const searchDateList = (e: any) => {
  state.dateList = []
  const arr = $time.getRange(state.startDate, state.endDate)
  console.log(arr)

  _(arr).forEach((item: any) => {
    if (e === 0) {
      state.dateList.push(item)
    }

    if (e === 1) {
      if ($time.getCurrentDate(item, 'ddd') !== 'Sat' && $time.getCurrentDate(item, 'ddd') !== 'Sun') {
        state.dateList.push(item)
      }
    }

    if (e === 2) {
      if ($time.getCurrentDate(item, 'ddd') === 'Sat' || $time.getCurrentDate(item, 'ddd') === 'Sun') {
        state.dateList.push(item)
      }
    }
  })

  emit('change', {
    dateList: state.dateList,
    singleDay: state.singleDay
  })
}

const disabledDate = (time: Date) => {
  // const startTime = $time.getBeforeDate(new Date($time.getMonthStartDate()))
  // time.getTime() < new Date(startTime).getTime() ||
  return time.getTime() > Date.now()
}

watch(
  () => props.dateValue,
  (val) => {
    state.date = val
  },
  {
    deep: true
  }
)

onMounted(() => {
  if (props.singleDayShow) {
    emit('change', {
      dateList: [$time.getCurrentDate()],
      singleDay: state.singleDay
    })
  } else {
    emit('change', {
      dateList: [$time.getBeforeWeekDate()[0].date, $time.getBeforeDate()],
      singleDay: state.singleDay
    })
  }
})
</script>

<template>
  <div class="flex flex-row items-center justify-start">
    <div v-if="props.show">
      <el-select-v2
        v-if="props.singleDayShow"
        class="ml-2 w-[100px]"
        v-model="state.singleDay"
        filterable
        :options="state.singleOptions"
        placeholder="请选择路口"
        @change="singleChange"
      />
    </div>

    <div class="ml-2 w-[120px]" v-if="state.singleDay === 0">
      <date-picker
        v-model="state.endDate"
        label="日期"
        format="YYYY-MM-DD"
        type="date"
        :clearable="false"
        :disabled-date="disabledDate"
        @change="changeDate"
      />
    </div>
    <div class="ml-2 w-[220px]" v-else>
      <date-picker
        v-model="state.date"
        label="日期"
        format="YYYY-MM-DD"
        start-placeholder="起始时间"
        end-placeholder="结束时间"
        type="daterange"
        :clearable="false"
        :disabled-date="disabledDate"
        @change="changeDate"
      />
    </div>

    <el-select-v2
      v-if="state.singleDay === 1 && props.dateTypeShow"
      class="ml-2 !w-[100px]"
      v-model="state.dateType"
      filterable
      :options="state.dateTypeList"
      placeholder="请选择周期"
      value-key="value"
      @change="searchDateList"
    />
  </div>
</template>

<style lang="scss" scoped></style>
